<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta name="description" content="Linframe是国内推出的一个用于前端开发的开源工具包。它由lindf开发，是一个CSS/HTML框架。目前，Linframe最新版本为1.0 。Linframe中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。">
    <meta name="keywords" content="Linframe,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门">
    <meta name="author" content="lindingfeng">
    <meta name="robots" content="index,follow">
    <meta name="application-name" content="lindf.com">
    <title>个人简历</title>
    <link rel="icon" href="img/icon4.ico"/>
    <link rel="stylesheet" href="css/lindf.css">
    <link rel="stylesheet" href="css/Resume.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body style="background-image: url(img/bg6.png)">
<div class="bg-div">
    <div class="container clear-padding">
        <div class="row clear-padding" style="padding-top: 25px;">
            <div class="col-md-3 float-right right-content" style="background-color: #3b5998;">
                <div class="row" style="padding-top: 20px;">
                    <div class="col-lg-12 col-md-12 col-sm-3 col-xs-12 left-top" style="padding: 0;">
                        <div class="img-box">
                            <img class="first-img" src="img/photo1.jpg" style="width: 130px;height: 130px;" alt="img/ws.jpg">
                            <img src="img/photo2.jpg" style="width: 130px;height: 130px;" alt="img/myself.png">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-9 col-xs-12 left-bottom" style="padding: 0;">
                        <div class="profile-info text-center" style="color: #839ccf;">
                            <h1 style="font-size: 25px;">林 定 锋</h1>
                            <h4 style="margin-bottom: 5px;">Web Junior Engineer</h4>
                            <h6 style="font-size: 13px;">
                                <span class="glyphicon glyphicon-map-marker"></span>
                                Qionghai city of Hainan Province
                            </h6>
                        </div>
                        <div class="profile-desc hidden-xs">
                            <p style="color: #839ccf;margin-bottom: 0;">
                                不管你能做什么，或者梦想能做什么，开始去做吧。胆识将赋予你天赋、能力和神奇的力量。
                                <span style="display: block;text-align: right">——约翰·沃尔夫冈·冯·歌德</span>
                            </p>
                        </div>
                        <div class="profile-social text-center hidden-sm hidden-xs" style="color: #839ccf;">
                            <h4 style="margin-bottom: 15px;">
                                我的社会概况
                            </h4>
                            <div class="link clear">
                                <a href="javascript:void(0);">
                                    <span class="glyphicon glyphicon-earphone"></span>
                                </a>
                                <a href="javascript:void(0);">
                                    <span class="glyphicon glyphicon-paperclip"></span>
                                </a>
                                <a href="javascript:void(0);">
                                    <span class="glyphicon glyphicon-home"></span>
                                </a>
                                <a href="javascript:void(0);">
                                    <span class="glyphicon glyphicon-cloud"></span>
                                </a>
                                <a href="javascript:void(0);">
                                    <span class="glyphicon glyphicon-comment"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-9 float-left clear left-content" style="padding-left: 0;">
                <ul class="list fLeft hidden-xs">
                    <li class="active">
                        <div class="font-icon">
                            <span class="glyphicon glyphicon-user"></span>
                        </div>
                    </li>
                    <li>
                        <div class="font-icon">
                            <span class="glyphicon glyphicon-tasks"></span>
                        </div>
                    </li>
                    <li>
                        <div class="font-icon">
                            <span class="glyphicon glyphicon-briefcase"></span>
                        </div>
                    </li>
                    <li>
                        <div class="font-icon">
                            <span class="glyphicon glyphicon-bold"></span>
                        </div>
                    </li>
                    <li style="margin-bottom: 75px;">
                        <div class="font-icon">
                            <span class="glyphicon glyphicon-envelope"></span>
                        </div>
                    </li>
                    <li>
                        <div class="font-icon">
                            <span class="glyphicon glyphicon-envelope"></span>
                        </div>
                    </li>
                    <li>
                        <div class="font-icon">
                            <span class="glyphicon glyphicon-envelope"></span>
                        </div>
                    </li>
                </ul>
                <!-- PROFILE -->
                <div class="content-list fLeft">
                    <h2 class="xs-show hidden-lg hidden-md hidden-sm">PROFILE</h2>
                    <div class="content-list-box">
                        <div class="content">
                            <h1><span>Profile - About Me</span></h1>
                            <!-- Lindf -->
                            <div class="row">
                                <div class="col-md-6 profile-l" style="padding-left: 0;">
                                    <div class="title-content">
                                        <div class="text-content">Lindf</div>
                                    </div>
                                    <ul class="title-content-list" style="margin: 15px 0;">
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-user"></span>
                                            <span>Name</span>
                                            <span class="value">林定锋</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                            <span>Date of birth</span>
                                            <span class="value">1994-05-29</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-map-marker"></span>
                                            <span>Adress</span>
                                            <span class="value">Qionghai of Hainan Province</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-envelope"></span>
                                            <span>Email</span>
                                            <span class="value">lindfkkd@163.com</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-earphone"></span>
                                            <span>Phone</span>
                                            <span class="value">180****1629</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-globe"></span>
                                            <span>Website</span>
                                            <span class="value"><a class="a-lick" href="http://www.lindf.com">www.lindf.com</a></span>
                                        </li>
                                    </ul>
                                    <p style="font-size: 13px;text-indent: 2em;color: #999;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis.
                                    </p>
                                    <p style="font-size: 13px;text-indent: 2em;color: #999;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis.
                                    </p>
                                </div>
                                <div class="col-md-6 profile-r hidden-sm hidden-xs" style="padding-right: 0;">
                                    <div class="img-action">
                                        <img style="width: 333px;height: 410px;" src="img/tabs1.jpg" alt="tabs1.jpg">
                                        <img style="width: 333px;height: 410px;" src="img/tabs2.png" alt="tabs2.png">
                                        <img style="width: 333px;height: 410px;" src="img/tabs3.png" alt="tabs1.jpg">
                                    </div>
                                </div>
                            </div>
                            <!-- MY SERVICES 1 -->
                            <h1 style="color: #3B5998;font-size: 20px;font-weight: 500;margin-top: 30px;"><span>MY SERVICES 1</span></h1>
                            <div class="row">
                                <div class="col-md-4 services" style="">
                                    <div class="left">
                                        <div class="icon-box">
                                            <span class="glyphicon glyphicon-tags"></span>
                                        </div>
                                        <div class="text-box">
                                            <p class="text-center" style="margin: 10px 0 5px;">MAKING MONEY</p>
                                            <p class="text-center">Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 services" style="">
                                    <div class="left">
                                        <div class="icon-box">
                                            <span class="glyphicon glyphicon-cog" style="left: 23px;"></span>
                                        </div>
                                        <div class="text-box">
                                            <p class="text-center" style="margin: 10px 0 5px;">EASY TO CUSTOMIZE</p>
                                            <p class="text-center">Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 services" style="">
                                    <div class="left">
                                        <div class="icon-box">
                                            <span class="glyphicon glyphicon-fullscreen" style="left: 23px;"></span>
                                        </div>
                                        <div class="text-box">
                                            <p class="text-center" style="margin: 10px 0 5px;">MOVING LET US HELP</p>
                                            <p class="text-center">Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- MY SERVICES 2 -->
                            <h1 style="color: #3B5998;font-size: 20px;font-weight: 500;margin-top: 15px;"><span>MY SERVICES 2</span></h1>
                            <div class="content-panel">
                                <div class="test" data-panel="Collapse1">
                                    <div class="panel panel-primary" style="margin-bottom: 10px;">
                                        <div class="panel-heading">
                                            <h4 class="">Making Money</h4>
                                        </div>
                                        <div class="panel-body">
                                            <p style="text-indent: 2em;margin-bottom: 0;">
                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary" style="margin-bottom: 10px;">
                                        <div class="panel-heading">
                                            <h4 class="">Easy to Customize</h4>
                                        </div>
                                        <div class="panel-body" style="display: none;">
                                            <p style="text-indent: 2em;margin-bottom: 0;">
                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary"  style="margin-bottom: 0;">
                                        <div class="panel-heading">
                                            <h4 class="">Moving Let Us Help</h4>
                                        </div>
                                        <div class="panel-body" style="display: none;">
                                            <p style="text-indent: 2em;margin-bottom: 0;">
                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="scroll hidden-xs" style="height: 580px;">
                            <div class="scroll-height"></div>
                        </div>
                    </div>
                </div>
                <!--  RESUME -->
                <div class="content-list fLeft" style="display: none;">
                    <h2 class="xs-show hidden-lg hidden-md hidden-sm">RESUME</h2>
                    <div class="content-list-box">
                        <div id="content" class="content">
                            <h1><span>技能介绍</span></h1>
                            <!-- 技能介绍 -->
                            <div class="row">
                                <div class="col-md-6 profile-l" style="padding-left: 0;">
                                    <!-- 基本技能 -->
                                    <div class="title-content" style="margin-bottom: 15px;">
                                        <div class="text-content">基本技能</div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">80%</span>
                                        <div class="p-font">Photoshop</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">85%</span>
                                        <div class="p-font">Html</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">70%</span>
                                        <div class="p-font">Css</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">60%</span>
                                        <div class="p-font">Javascript</div>
                                        <div class="progress-bar active"></div>
                                    </div>

                                    <!-- 框架技能 -->
                                    <div class="title-content" style="margin-bottom: 15px;">
                                        <div class="text-content">框架技能</div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">70%</span>
                                        <div class="p-font">jQuery</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">78%</span>
                                        <div class="p-font">Bootstrap</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">50%</span>
                                        <div class="p-font">AngularJs</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">60%</span>
                                        <div class="p-font">jQueryUI</div>
                                        <div class="progress-bar active"></div>
                                    </div>

                                    <!-- 工具技能 -->
                                    <div class="title-content" style="margin-bottom: 15px;">
                                        <div class="text-content">工具技能</div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">80%</span>
                                        <div class="p-font">Gulp</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">65%</span>
                                        <div class="p-font">Git</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">75%</span>
                                        <div class="p-font">Webpack</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">85%</span>
                                        <div class="p-font">Firebug</div>
                                        <div class="progress-bar active"></div>
                                    </div>

                                    <!-- 语言技能 -->
                                    <div class="title-content" style="margin-bottom: 15px;">
                                        <div class="text-content">语言技能</div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">95%</span>
                                        <div class="p-font">Mandarin</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">50%</span>
                                        <div class="p-font">English</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">80%</span>
                                        <div class="p-font">Taiwanese</div>
                                        <div class="progress-bar active"></div>
                                    </div>

                                    <!-- 爱好技能 -->
                                    <div class="title-content" style="margin-bottom: 15px;">
                                        <div class="text-content">爱好技能</div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">90%</span>
                                        <div class="p-font">Basketball</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">80%</span>
                                        <div class="p-font">Eat</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">75%</span>
                                        <div class="p-font">Reading</div>
                                        <div class="progress-bar active"></div>
                                    </div>
                                    <div class="progress">
                                        <span class="s-font">60%</span>
                                        <div class="p-font">Music</div>
                                        <div class="progress-bar active"></div>
                                    </div>

                                    <!-- 我的简历 -->
                                    <div class="title-content" style="margin-bottom: 10px;">
                                        <div class="text-content">我的简历</div>
                                    </div>
                                    <div class="download-box" style="position: relative;margin-bottom: 10px;">
                                        <div class="download-resume">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                            Check My Resume
                                        </div>
                                        <a href="javascript:void(0);" class="rotate-div" style="background-color: #4cae4c;">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                            Check My Resume
                                        </a>
                                    </div>
                                    <div class="download-box" style="position: relative;margin-bottom: 10px;">
                                        <div class="download-resume">
                                            <span class="glyphicon glyphicon-save"></span>
                                            Download My Resume
                                        </div>
                                        <a href="javascript:void(0);" class="rotate-div">
                                            <span class="glyphicon glyphicon-save"></span>
                                            Download My Resume
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-6 profile-r" style="padding-right: 0;">
                                    <!-- Web 经历 -->
                                    <div class="title-content" style="margin-bottom: 15px;">
                                        <div class="text-content">Web 经历</div>
                                    </div>
                                    <ul class="experience-list">
                                        <li>
                                            <h5 class="clear">
                                                <span style="color: #5c5c5c;">Web Developer</span>
                                                <span class="r-content">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                    2013 - 2015
                                                </span>
                                            </h5>
                                            <h6>
                                                <span class="glyphicon glyphicon-home" style="top:0;"></span>
                                                Name of Company
                                            </h6>
                                            <p>
                                                Lorem ipsum dolor sit amet, consecte adipiscing sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.
                                            </p>
                                        </li>
                                        <li>
                                            <h5 class="clear">
                                                <span style="color: #5c5c5c;">Front-End Developer</span>
                                                <span class="r-content">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                    2015 - 2017
                                                </span>
                                            </h5>
                                            <h6>
                                                <span class="glyphicon glyphicon-home" style="top:0;"></span>
                                                Name of Company
                                            </h6>
                                            <p>
                                                Lorem ipsum dolor sit amet, consecte adipiscing sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.
                                            </p>
                                        </li>
                                    </ul>

                                    <!-- 教育经历 -->
                                    <div class="title-content" style="margin-bottom: 15px;">
                                        <div class="text-content">教育经历</div>
                                    </div>
                                    <ul class="experience-list">
                                        <li>
                                            <h5 class="clear">
                                                <span style="color: #5c5c5c;">学士学位</span>
                                                <span class="r-content">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                    2013 - 2017
                                                </span>
                                            </h5>
                                            <h6>
                                                <span class="glyphicon glyphicon-object-align-bottom" style="top:0;"></span>
                                                河北工程大学
                                            </h6>
                                            <p>
                                                Lorem ipsum dolor sit amet, consecte adipiscing sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.
                                            </p>
                                        </li>
                                        <li>
                                            <h5 class="clear">
                                                <span style="color: #5c5c5c;">中学</span>
                                                <span class="r-content">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                    2010 - 2011
                                                </span>
                                            </h5>
                                            <h6>
                                                <span class="glyphicon glyphicon-object-align-bottom" style="top:0;"></span>
                                                嘉积中学海桂学校
                                            </h6>
                                            <p>
                                                Lorem ipsum dolor sit amet, consecte adipiscing sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.
                                            </p>
                                        </li>
                                    </ul>

                                    <!-- 获奖经历 -->
                                    <div class="title-content" style="margin-bottom: 15px;">
                                        <div class="text-content">获奖经历</div>
                                    </div>
                                    <ul class="experience-list">
                                        <li>
                                            <h5 class="clear">
                                                <span style="color: #5c5c5c;">语言测试</span>
                                                <span class="r-content">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                    2016 - 2017
                                                </span>
                                            </h5>
                                            <h6>
                                                <span class="glyphicon glyphicon-glass" style="top:0;"></span>
                                                普通话等级测试
                                            </h6>
                                            <p>
                                                Lorem ipsum dolor sit amet, consecte adipiscing sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.
                                            </p>
                                        </li>
                                        <li>
                                            <h5 class="clear">
                                                <span style="color: #5c5c5c;">语言测试</span>
                                                <span class="r-content">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                    2016 - 2017
                                                </span>
                                            </h5>
                                            <h6>
                                                <span class="glyphicon glyphicon-glass" style="top:0;"></span>
                                                普通话等级测试
                                            </h6>
                                            <p>
                                                Lorem ipsum dolor sit amet, consecte adipiscing sit amet ligula non lectus cursus egestas. Cras erat lorem, fringilla quis sagittis in, sagittis inNam leo tortor Nam leo tortor Vivamus.
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="scroll" class="scroll hidden-xs" style="height: 580px;">
                            <div class="scroll-height"></div>
                        </div>
                    </div>
                </div>
                <!--  PORTFOLIO -->
                <div class="content-list fLeft" style="display: none;">
                    <h2 class="xs-show hidden-lg hidden-md hidden-sm">PORTFOLIO</h2>
                    <div class="content-list-box">
                        <div class="content">
                            <h1><span>Profile - About Me</span></h1>
                            <!-- Lindf -->
                            <div class="row">
                                <div class="col-md-6 profile-l" style="padding-left: 0;">
                                    <div class="title-content">
                                        <div class="text-content">Lindf</div>
                                    </div>
                                    <ul class="title-content-list" style="margin: 15px 0;">
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-user"></span>
                                            <span>Name</span>
                                            <span class="value">Lindf</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                            <span>Date of birth</span>
                                            <span class="value">April 29, 1994</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-map-marker"></span>
                                            <span>Adress</span>
                                            <span class="value">Qionghai of Hainan Province</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-envelope"></span>
                                            <span>Email</span>
                                            <span class="value">1758765238@qq.com</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-earphone"></span>
                                            <span>Phone</span>
                                            <span class="value">180****1629</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-globe"></span>
                                            <span>Website</span>
                                            <span class="value"><a class="a-lick" href="http://www.lindf.com">www.lindf.com</a></span>
                                        </li>
                                    </ul>
                                    <p style="font-size: 13px;text-indent: 2em;color: #999;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis.
                                    </p>
                                    <p style="font-size: 13px;text-indent: 2em;color: #999;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis.
                                    </p>
                                </div>
                                <div class="col-md-6 profile-r hidden-sm hidden-xs" style="padding-right: 0;">
                                    <div class="img-action">
                                        <img style="width: 333px;height: 410px;" src="img/tabs1.jpg" alt="tabs1.jpg">
                                        <img style="width: 333px;height: 410px;" src="img/tabs2.png" alt="tabs2.png">
                                        <img style="width: 333px;height: 410px;" src="img/tabs3.png" alt="tabs1.jpg">
                                    </div>
                                </div>
                            </div>
                            <!-- MY SERVICES 1 -->
                            <h1 style="color: #3B5998;font-size: 20px;font-weight: 500;margin-top: 30px;"><span>MY SERVICES 1</span></h1>
                            <div class="row">
                                <div class="col-md-4 services" style="">
                                    <div class="left">
                                        <div class="icon-box">
                                            <span class="glyphicon glyphicon-tags"></span>
                                        </div>
                                        <div class="text-box">
                                            <p class="text-center" style="margin: 10px 0 5px;">MAKING MONEY</p>
                                            <p class="text-center">Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 services" style="">
                                    <div class="left">
                                        <div class="icon-box">
                                            <span class="glyphicon glyphicon-cog" style="left: 23px;"></span>
                                        </div>
                                        <div class="text-box">
                                            <p class="text-center" style="margin: 10px 0 5px;">EASY TO CUSTOMIZE</p>
                                            <p class="text-center">Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 services" style="">
                                    <div class="left">
                                        <div class="icon-box">
                                            <span class="glyphicon glyphicon-fullscreen" style="left: 23px;"></span>
                                        </div>
                                        <div class="text-box">
                                            <p class="text-center" style="margin: 10px 0 5px;">MOVING LET US HELP</p>
                                            <p class="text-center">Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- MY SERVICES 2 -->
                            <h1 style="color: #3B5998;font-size: 20px;font-weight: 500;margin-top: 15px;"><span>MY SERVICES 2</span></h1>
                            <div class="content-panel">
                                <div class="test" data-panel="Collapse1">
                                    <div class="panel panel-primary" style="margin-bottom: 10px;">
                                        <div class="panel-heading">
                                            <h4 class="">Making Money</h4>
                                        </div>
                                        <div class="panel-body">
                                            <p style="text-indent: 2em;margin-bottom: 0;">
                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary" style="margin-bottom: 10px;">
                                        <div class="panel-heading">
                                            <h4 class="">Easy to Customize</h4>
                                        </div>
                                        <div class="panel-body" style="display: none;">
                                            <p style="text-indent: 2em;margin-bottom: 0;">
                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary"  style="margin-bottom: 0;">
                                        <div class="panel-heading">
                                            <h4 class="">Moving Let Us Help</h4>
                                        </div>
                                        <div class="panel-body" style="display: none;">
                                            <p style="text-indent: 2em;margin-bottom: 0;">
                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="scroll hidden-xs" style="height: 580px;">
                            <div class="scroll-height"></div>
                        </div>
                    </div>
                </div>
                <!--  BLOG -->
                <div class="content-list fLeft" style="display: none;">
                    <h2 class="xs-show hidden-lg hidden-md hidden-sm">BLOG</h2>
                    <div class="content-list-box">
                        <div class="content">
                            <h1><span>Profile - About Me</span></h1>
                            <!-- Lindf -->
                            <div class="row">
                                <div class="col-md-6 profile-l" style="padding-left: 0;">
                                    <div class="title-content">
                                        <div class="text-content">Lindf</div>
                                    </div>
                                    <ul class="title-content-list" style="margin: 15px 0;">
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-user"></span>
                                            <span>Name</span>
                                            <span class="value">Lindf</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                            <span>Date of birth</span>
                                            <span class="value">April 29, 1994</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-map-marker"></span>
                                            <span>Adress</span>
                                            <span class="value">Qionghai of Hainan Province</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-envelope"></span>
                                            <span>Email</span>
                                            <span class="value">1758765238@qq.com</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-earphone"></span>
                                            <span>Phone</span>
                                            <span class="value">180****1629</span>
                                        </li>
                                        <li class="clear">
                                            <span class="glyphicon glyphicon-globe"></span>
                                            <span>Website</span>
                                            <span class="value"><a class="a-lick" href="http://www.lindf.com">www.lindf.com</a></span>
                                        </li>
                                    </ul>
                                    <p style="font-size: 13px;text-indent: 2em;color: #999;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis.
                                    </p>
                                    <p style="font-size: 13px;text-indent: 2em;color: #999;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis.
                                    </p>
                                </div>
                                <div class="col-md-6 profile-r hidden-sm hidden-xs" style="padding-right: 0;">
                                    <div class="img-action">
                                        <img style="width: 333px;height: 410px;" src="img/tabs1.jpg" alt="tabs1.jpg">
                                        <img style="width: 333px;height: 410px;" src="img/tabs2.png" alt="tabs2.png">
                                        <img style="width: 333px;height: 410px;" src="img/tabs3.png" alt="tabs1.jpg">
                                    </div>
                                </div>
                            </div>
                            <!-- MY SERVICES 1 -->
                            <h1 style="color: #3B5998;font-size: 20px;font-weight: 500;margin-top: 30px;"><span>MY SERVICES 1</span></h1>
                            <div class="row">
                                <div class="col-md-4 services" style="">
                                    <div class="left">
                                        <div class="icon-box">
                                            <span class="glyphicon glyphicon-tags"></span>
                                        </div>
                                        <div class="text-box">
                                            <p class="text-center" style="margin: 10px 0 5px;">MAKING MONEY</p>
                                            <p class="text-center">Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 services" style="">
                                    <div class="left">
                                        <div class="icon-box">
                                            <span class="glyphicon glyphicon-cog" style="left: 23px;"></span>
                                        </div>
                                        <div class="text-box">
                                            <p class="text-center" style="margin: 10px 0 5px;">EASY TO CUSTOMIZE</p>
                                            <p class="text-center">Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 services" style="">
                                    <div class="left">
                                        <div class="icon-box">
                                            <span class="glyphicon glyphicon-fullscreen" style="left: 23px;"></span>
                                        </div>
                                        <div class="text-box">
                                            <p class="text-center" style="margin: 10px 0 5px;">MOVING LET US HELP</p>
                                            <p class="text-center">Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- MY SERVICES 2 -->
                            <h1 style="color: #3B5998;font-size: 20px;font-weight: 500;margin-top: 15px;"><span>MY SERVICES 2</span></h1>
                            <div class="content-panel">
                                <div class="test" data-panel="Collapse1">
                                    <div class="panel panel-primary" style="margin-bottom: 10px;">
                                        <div class="panel-heading">
                                            <h4 class="">Making Money</h4>
                                        </div>
                                        <div class="panel-body">
                                            <p style="text-indent: 2em;margin-bottom: 0;">
                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary" style="margin-bottom: 10px;">
                                        <div class="panel-heading">
                                            <h4 class="">Easy to Customize</h4>
                                        </div>
                                        <div class="panel-body" style="display: none;">
                                            <p style="text-indent: 2em;margin-bottom: 0;">
                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary"  style="margin-bottom: 0;">
                                        <div class="panel-heading">
                                            <h4 class="">Moving Let Us Help</h4>
                                        </div>
                                        <div class="panel-body" style="display: none;">
                                            <p style="text-indent: 2em;margin-bottom: 0;">
                                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="scroll hidden-xs" style="height: 580px;">
                            <div class="scroll-height"></div>
                        </div>
                    </div>
                </div>
                <!-- CONTACT -->
                <div class="content-list fLeft" style="display: none;">
                    <h2 class="xs-show hidden-lg hidden-md hidden-sm">CONTACT</h2>
                    <div class="content-list-box">
                        <div class="content">
                            <h1><span>Contact - Contact Me</span></h1>
                            <!-- Contact - Contact Me -->
                            <div class="row">
                                <!--LET'S KEEP IN TOUCH-->
                                <div class="col-md-6 profile-l" style="padding-left: 0;">
                                    <div class="title-content">
                                        <div class="text-content">LET'S KEEP IN TOUCH</div>
                                    </div>
                                    <div style="margin-top: 15px;">
                                        <form class="form-group">
                                            <label class="control-label">Your Name:</label>
                                            <input class="form-control" type="text" placeholder="Your Name...">
                                            <label class="control-label">Your Email:</label>
                                            <input class="form-control" type="text" placeholder="Your Email...">
                                            <label class="control-label">Your Message:</label>
                                            <textarea class="form-control" rows="7" placeholder="Your Message..."></textarea>
                                            <button class="btn btn-danger btn-block" style="margin-bottom: 15px;">Reset</button>
                                            <button class="btn btn-primary btn-block">Submit</button>
                                        </form>
                                    </div>
                                </div>
                                <!--Other Way Submit？-->
                                <div class="col-md-6 profile-r hidden-sm hidden-xs" style="padding-right: 0;">
                                    <div class="title-content" style="margin-bottom: 40px;">
                                        <div class="text-content">Other Way Submit？</div>
                                    </div>
                                    <div class="link-from" style="background-color: #337ab7;">
                                        <span class="link-from-text">Sigin In With QQ</span>
                                        <div class="link-from-icon" style="background-color: #265a88;">
                                            <span class="glyphicon glyphicon-user" style="top: -2px;"></span>
                                        </div>
                                    </div>
                                    <div class="link-from" style="background-color: #5cb85c;">
                                        <span class="link-from-text">Sigin In With Sina</span>
                                        <div class="link-from-icon" style="background-color: #419641;">
                                            <span class="glyphicon glyphicon-user" style="top: -2px;"></span>
                                        </div>
                                    </div>
                                    <div class="link-from" style="background-color: #5bc0de;">
                                        <span class="link-from-text">Sigin In With Fecebook</span>
                                        <div class="link-from-icon" style="background-color: #2aabd2;">
                                            <span class="glyphicon glyphicon-user" style="top: -2px;"></span>
                                        </div>
                                    </div>
                                    <div class="link-from" style="background-color: #f0ad4e;">
                                        <span class="link-from-text">Sigin In With Twitter</span>
                                        <div class="link-from-icon" style="background-color: #eb9316;">
                                            <span class="glyphicon glyphicon-user" style="top: -2px;"></span>
                                        </div>
                                    </div>
                                    <div class="link-from" style="background-color: #d9534f;">
                                        <span class="link-from-text">Sigin In With Google</span>
                                        <div class="link-from-icon" style="background-color: #c12e2a;">
                                            <span class="glyphicon glyphicon-user" style="top: -2px;"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/lindf.js"></script>
<script src="js/Resume.js"></script>
</body>
</html>